/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-17 09:31:44
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-08 16:13:00
 * @FilePath: \cxl-h5\src\pages\vehicleCondition\queryRecord\index.ts
 */
import { cancelPay } from '@/apis/order/order'
import { paramsOrderInterface, reportOrderList } from '@/apis/report'
import { storage } from '@/store/sessionStorage'
import { BasicData } from '@/utils/basicData'
import { reactive, ref } from 'vue'

export default class QueryRecord extends BasicData {
    //tab
    tabList = reactive(['待支付', '已支付', '已关闭'])
    //下拉刷新
    refreshLoading = ref(false)
    //内容数据刷新
    dataLoading = ref(false)
    //内容结束刷新
    dataFinished = ref(false)
    //分页
    pagination: any = reactive({
        pageNo: 1,
        pageSize: 10
    })
    //列表数据
    list: any[] = reactive([])
    listStatus = ref(false)
    //企业id
    companyId = ref('')
    //选择tab 的下标
    selectIndex = ref(0)
    //用户信息
    userInfo: any
    //第一次触发
    firstOpen = ref(true)
    //筛选过滤
    filter = reactive([
        {
            type: 'type',
            name: '类型',
            active: false,
            index: 0,
            options: [
                //1.车况-出险；2.车况-维保车况；3.新能源车况电池
                { value: '0', label: '全部' },
                { value: '1', label: '出险车况' },
                { value: '2', label: '维保车况' },
                { value: '3', label: '新能源车况' }
            ]
        },
        {
            type: 'status',
            name: '状态',
            active: false,
            index: 0,
            options: [
                //0.待付款；1.已支付；2.支付失败；3.已关闭
                { value: '-1', label: '全部' },
                { value: '0', label: '待支付' },
                { value: '1', label: '已支付' },
                { value: '2', label: '支付失败' },
                { value: '3', label: '已关闭' }
            ]
        },
        {
            type: 'sort',
            name: '排序',
            active: false,
            index: 0,
            options: [
                { value: '-1', label: '默认排序' },
                { value: '0', label: '时间升序' },
                { value: '1', label: '时间倒序' }
            ]
        }
    ])
    select = reactive({
        typeIndex: 0,
        valueIndex: 0,
        visible: false
    })
    //确认弹窗
    confirmPopup = reactive({
        visible: false,
        title: '确认',
        content: '确定要取消支付此订单吗？',
        orderId: ''
    })
    constructor() {
        super()
        this.userInfo = storage.get('userInfo') ? JSON.parse(storage.get('userInfo')) : null
    }
    //获取数据
    getData = (isRefresh = false) => {
        const params: paramsOrderInterface = {
            current: this.pagination.pageNo,
            size: this.pagination.pageSize,
            companyId: this.userInfo.companyId
        }
        //产品类型
        if (this.filter[0].index !== 0) {
            params.productType = Number(this.filter[0].options[this.filter[0].index].value)
        }
        //状态
        if (this.filter[1].index !== 0) {
            params.orderStatus = Number(this.filter[1].options[this.filter[1].index].value)
        }

        //排序
        if (this.filter[2].index !== 0) {
            params.orderFlag = Number(this.filter[2].options[this.filter[2].index].value)
        }

        console.log('params', params, this.select)
        reportOrderList(params).then(res => {
            if (this.refreshLoading.value) {
                this.refreshLoading.value = false
            }
            // 加载状态结束
            this.dataLoading.value = false
            if (res.data.value === 200) {
                if (isRefresh) {
                    this.resultDispose(res.data.data.records, res.data.data.total, isRefresh)
                } else {
                    this.resultDispose(res.data.data.records, res.data.data.total)
                }
            } else {
                this.dataFinished.value = true
            }
        })
    }
    resultDispose = (records: any[], total: number, isRefresh = false) => {
        this.pagination.pageNo += 1
        if (isRefresh) {
            this.list.length = 0
            //刷新时，页面滚动到顶部
            const ele = document.querySelector('.van-list-container') as HTMLElement
            ele.scrollTop = 0
        }

        this.list.push(...records)

        this.listStatus.value = this.list.length ? false : true

        // 加载结束状态
        if (this.list.length >= total) {
            console.log('over')
            this.dataFinished.value = true
        }
    }

    onRefresh = () => {
        console.log('下拉刷新')
        this.reset(true)
        this.getData(true)
    }
    //加载数据
    timer: any
    onLoad = () => {
        this.timer = setTimeout(
            () => {
                this.getData()
                if (this.timer) clearTimeout(this.timer)
            },
            this.timer ? 400 : 0
        )
    }
    reset = (isRefresh = false) => {
        this.dataFinished.value = false
        this.dataLoading.value = true
        this.pagination.pageNo = 1
        if (!isRefresh) {
            this.list.length = 0
        }
    }
    //待支付页面更新数据
    onUpdateList = (res: any) => {
        console.log(res)
        if (res.type === 'cancel') {
            this.confirmPopup.visible = true
            this.confirmPopup.orderId = res.orderId
        } else {
            this.onRefresh()
        }
        // this.onRefresh()
    }
    confirmCancelPay = () => {
        this.confirmPopup.visible = false
        cancelPay(this.confirmPopup.orderId).then(res => {
            if (res.data.value === 200) {
                this.onRefresh()
            }
        })
    }

    //监听选择筛选的类型
    onSelectType = (index: number) => {
        this.filter.forEach(item => {
            item.active = false
        })
        if (this.select.typeIndex == index) {
            this.select.visible = !this.select.visible
            this.filter[index].active = !this.select.visible ? false : !this.filter[index].active
        } else {
            this.select.typeIndex = index
            this.select.visible = true
            this.filter[index].active = true
        }
    }
    //监听选择类型的值
    onSelectTypeValue = (index: number) => {
        console.log('value', this.filter[this.select.typeIndex].options[index])
        this.filter[this.select.typeIndex].index = index
        this.onHideFilter()
        this.onRefresh()
    }
    //点击透明阴影隐藏过滤弹窗
    onHideFilter = () => {
        this.filter.forEach(item => {
            item.active = false
        })
        this.select.visible = false
    }
}
